<template>
  <div class="course-container">
    <!-- Left Section - Video Player -->
    <div class="video-section">
      <h2 class="section-title">精华介绍版</h2>
      <div class="video-player">
        <video ref="videoPlayer" :src="currentVideo.url" class="main-video" @timeupdate="onTimeUpdate">
          Your browser does not support the video tag.
        </video>
        <div class="video-controls">
          <div class="progress-bar" @click="seekVideo">
            <div class="progress" :style="{ width: `${(currentTime / duration) * 100}%` }"></div>
          </div>
          <div class="controls-bottom">
            <button class="play-pause" @click="togglePlay">
              <i :class="['control-icon', isPlaying ? 'pause' : 'play']"></i>
            </button>
            <div class="time-display">{{ formatTime(currentTime) }}/{{ formatTime(duration) }}</div>
            <button class="fullscreen-btn" @click="toggleFullscreen">
              <img src="@/assets/index/fangda@2x.png" alt="" style="width: 22px;">
              <!-- <i :class="['fullscreen-icon', isFullscreen ? 'exit' : 'enter']"></i> -->
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Section - Course List -->
    <div class="course-list">
      <div class="course-header">
        <h2 class="course-title">初级课程 (CAAC)</h2>
        <div class="instructor-info">
          <img :src="instructor.avatar" alt="Instructor" class="instructor-avatar" />
          <div class="instructor-details">
            <div>讲师: {{ instructor.name }}</div>
            <div>课时: {{ instructor.duration }}小时</div>
          </div>
        </div>
      </div>

      <div class="lessons-list">
        <div v-for="(section, sectionIndex) in courseSections" :key="sectionIndex" class="section">
          <div class="section-header">
            <span class="section-number">{{ sectionIndex + 1 }}.</span>
            <span class="section-title">{{ section.title }}</span>
          </div>
          <div class="lesson-items">
            <div v-for="(lesson, lessonIndex) in section.lessons" :key="lessonIndex" class="lesson-item"
              :class="{ active: currentLesson === `${sectionIndex}-${lessonIndex}` }"
              @click="playLesson(sectionIndex, lessonIndex)">
              <div class="lesson-title">
                <span class="lesson-number">{{ lessonIndex + 1 }}.</span>
                {{ lesson.title }}
                <div class="lesson-number-text">可试看</div>
              </div>
              <div class="lesson-duration" v-if="lesson.duration">
                {{ lesson.duration }}
                <i class="play-icon" v-if="lesson.playable"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CourseVideo',
  data() {
    return {
      currentTime: 0,
      duration: 0,
      currentLesson: null,
      isPlaying: false,
      isFullscreen: false,
      instructor: {
        name: '张三',
        avatar: require('@/assets/index/b1.png'),
        duration: 120
      },
      currentVideo: {
        url: "https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4"
      },
      courseSections: [
        {
          title: '精华版介绍',
          lessons: [
            { title: '精华版介绍', duration: '2分钟', playable: true, url: 'https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4' },
            { title: '精华版介绍', duration: '2分钟', playable: true, url: 'https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4' }
          ]
        },
        {
          title: '精华版介绍',
          lessons: [
            { title: '精华版介绍', duration: '2分钟', playable: true, url: 'https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4' },
            { title: '精华版介绍', duration: '2分钟', playable: true, url: 'https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4' }
          ]
        },
        // {
        //   title: '精华版介绍',
        //   lessons: [
        //     { title: '精华版介绍', duration: '2分钟', playable: true, url: 'https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4' },
        //     { title: '精华版介绍', duration: '2分钟', playable: true, url: 'https://resources.laihua.com/2025-3-24/75187d58-4ea5-4f86-b623-7e495ae45f4a.mp4' }
        //   ]
        // }
      ]
    }
  },
  methods: {
    playLesson(sectionIndex, lessonIndex) {
      const lesson = this.courseSections[sectionIndex].lessons[lessonIndex];
      if (lesson.playable) {
        this.currentLesson = `${sectionIndex}-${lessonIndex}`;
        this.currentVideo.url = lesson.url;
        this.$nextTick(() => {
          this.$refs.videoPlayer.play();
          this.isPlaying = true;
        });
      }
    },
    togglePlay() {
      if (this.isPlaying) {
        this.$refs.videoPlayer.pause();
      } else {
        this.$refs.videoPlayer.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    seekVideo(event) {
      const progressBar = event.currentTarget;
      const clickPosition = (event.clientX - progressBar.getBoundingClientRect().left) / progressBar.offsetWidth;
      const newTime = clickPosition * this.duration;
      this.$refs.videoPlayer.currentTime = newTime;
    },
    onTimeUpdate() {
      this.currentTime = this.$refs.videoPlayer.currentTime;
      this.duration = this.$refs.videoPlayer.duration;
    },
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      return `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
    },
    async toggleFullscreen() {
      try {
        if (!this.isFullscreen) {
          if (this.$refs.videoPlayer.requestFullscreen) {
            await this.$refs.videoPlayer.requestFullscreen();
          } else if (this.$refs.videoPlayer.webkitRequestFullscreen) {
            await this.$refs.videoPlayer.webkitRequestFullscreen();
          } else if (this.$refs.videoPlayer.msRequestFullscreen) {
            await this.$refs.videoPlayer.msRequestFullscreen();
          }
        } else {
          if (document.exitFullscreen) {
            await document.exitFullscreen();
          } else if (document.webkitExitFullscreen) {
            await document.webkitExitFullscreen();
          } else if (document.msExitFullscreen) {
            await document.msExitFullscreen();
          }
        }
      } catch (error) {
        console.error('Error toggling fullscreen:', error);
      }
    },
    handleFullscreenChange() {
      this.isFullscreen = !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement);
    }
  },
  mounted() {
    document.addEventListener('fullscreenchange', this.handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.addEventListener('MSFullscreenChange', this.handleFullscreenChange);
  },
  beforeDestroy() {
    document.removeEventListener('fullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange);
    document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange);
  }
}
</script>

<style scoped lang="scss">
.course-container {
  display: flex;
  gap: 2rem;
  padding: 2rem 0;
  border-radius: 12px;
}

.video-section {
  flex: 1;
  background: #FFFFFF;
  box-shadow: 0px 2px 12px 0px #E1E3EB;
  border-radius: 12px;
  padding: 24px;

  .section-title {
    font-size: 24px;
    margin-bottom: 1rem;
    text-align: left;
    font-weight: 500;
  }
}

.video-player {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;

  .main-video {
    width: 100%;
    aspect-ratio: 16/9;
    background: #000;
    object-fit: cover;
  }
}

.video-controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));

  .progress-bar {
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    margin-bottom: 0.5rem;
    cursor: pointer;

    .progress {
      height: 100%;
      background: #1890ff;
      border-radius: 2px;
    }
  }

  .controls-bottom {
    display: flex;
    align-items: center;
    gap: 1rem;

    .play-pause,
    .fullscreen-btn {
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      width: 20px;
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .control-icon,
    .fullscreen-icon {
      width: 18px;
      height: 20px;
      background: #fff;
    }

    .control-icon {
      &.play {
        clip-path: polygon(0 0, 0 100%, 100% 50%);
      }

      &.pause {
        clip-path: polygon(0 0, 40% 0, 40% 100%, 0 100%, 60% 100%, 60% 0, 100% 0, 100% 100%, 0 100%);
      }
    }

    .fullscreen-icon {
      &.enter {
        clip-path: polygon(0 8px, 8px 8px, 8px 0,
            /* Top left arrow */
            16px 0, 16px 8px, 24px 8px,
            /* Top right arrow */
            24px 16px, 16px 16px, 16px 24px,
            /* Bottom right arrow */
            8px 24px, 8px 16px, 0 16px
            /* Bottom left arrow */
          );
      }

      &.exit {
        clip-path: polygon(8px 0, 16px 0, 16px 8px,
            /* Top left arrow */
            24px 8px, 24px 16px, 16px 16px,
            /* Top right arrow */
            16px 24px, 8px 24px, 8px 16px,
            /* Bottom right arrow */
            0 16px, 0 8px, 8px 8px
            /* Bottom left arrow */
          );
      }
    }

    .time-display {
      margin-right: auto; // Push fullscreen button to the right
      color: #fff;
      font-size: 14px;
    }
  }
}

.course-list {
  width: 380px;
  background: #FFFFFF;
  box-shadow: 0px 2px 12px 0px #E1E3EB;
  border-radius: 12px;
  padding: 24px;

  .course-header {
    margin-bottom: 2rem;

    .course-title {
      font-size: 24px;
      margin-bottom: 1rem;
      text-align: left;
      font-weight: 500;
    }
  }
}

.instructor-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  width: 100%;
  height: 88px;
  background: #F5F7FD;
  border-radius: 8px;
  padding: 16px;

  .instructor-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  .instructor-details {
    font-size: 14px;
    color: #666;
  }
}

.lessons-list {
  .section {
    margin-bottom: 1.5rem;

    .section-header {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      font-weight: 500;
      color: #333;
      font-size: 16px;

      .section-number {
        color: #666;
      }
    }
  }

  .lesson-items {
    margin-left: 30px;

    .lesson-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s;
      margin: 0.25rem 0;

      &:hover {
        background: #f5f5f5;
      }

      &.active {
        background: #e6f7ff;
        color: #1890ff;
      }

      .lesson-title {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        .lesson-number {
          color: #666;
        }
      }

      .lesson-duration {
        font-size: 12px;
        color: #666;
        display: flex;
        align-items: center;
        gap: 0.5rem;
      }

      .play-icon {
        width: 16px;
        height: 16px;
        background: #1890ff;
        clip-path: polygon(0 0, 0 100%, 100% 50%);
      }
    }
  }
}

.lesson-number-text {
  width: 42px;
  height: 18px;
  background: #1664FF;
  border-radius: 10px 10px 10px 0px;
  font-size: 12px;
  color: #fff;
}
</style>